{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2023, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div class="row">
  <div class="large-6 columns">
    <table class="dataTable">
      <thead>
        <tr>
          <th colspan="3">{{tr "Information"}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="key_td">{{tr "ID"}}</td>
          <td class="value_td" colspan="2">{{element.ID}}</td>
        </tr>
        {{{renameTrHTML}}}
        {{{clusterTrHTML}}}
        <tr>
          <td class="key_td">{{tr "State"}}</td>
          <td id="host_state_value" class="value_td">{{stateStr}}</td>
          <td></td>
        </tr>
        <tr>
          <td class="key_td">{{tr "IM MAD"}}</td>
          <td class="value_td">{{element.IM_MAD}}</td>
          <td></td>
        </tr>
        <tr>
          <td class="key_td">{{tr "VM MAD"}}</td>
          <td class="value_td">{{element.VM_MAD}}</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="large-6 columns">
    <table class="dataTable">
      <thead>
        <tr>
          <th colspan="3">{{tr "Capacity"}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="key_td">{{tr "Allocated Memory"}}</td>
          <td class="value_td" colspan="2" style="width:50%;">{{{memoryBars.allocated}}}</td>
        </tr>
        <tr>
          <td class="key_td">{{tr "Allocated CPU"}}</td>
          <td class="value_td" colspan="2" style="width:50%;">{{{cpuBars.allocated}}}</td>
        </tr>
        <tr>
          <td class="key_td">{{tr "Real Memory"}}</td>
          <td class="value_td" colspan="2" style="width:50%;">{{{memoryBars.real}}}</td>
        </tr>
        <tr>
          <td class="key_td">{{tr "Real CPU"}}</td>
          <td class="value_td" colspan="2" style="width:50%;">{{{cpuBars.real}}}</td>
        </tr>
      </tbody>
    </table>
    {{{datastoresCapacityTableHTML}}}
  </div>
</div>
<div class="row">
  <div class="large-12 columns">
    <table class="dataTable">
      <thead>
        <tr>
          <th colspan="4">{{tr "Reservation/Overcommitment"}} 
          <span class="right">
                <button id="update_reserved_hosts" type="button" class="button small success update_reserved right radius">
                  {{tr "Update"}}
                </button>
              </span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr colspan="3">
          <td class="key_td">{{tr "CPU"}}</td>
          <td><input type="range" name="rangeInput" id="change_bar_cpu_hosts" min="0" value="{{element.HOST_SHARE.MAX_CPU}}" max="{{maxReservedCPU}}">
          <label align="center">{{realCPU}}</label></td>
          <td><input type="number" id="textInput_reserved_cpu_hosts" value="{{element.HOST_SHARE.MAX_CPU}}" min="0" mid={{realCPU}} size="1"></td>
        </tr>
        <tr colspan="3">
          <td class="key_td">{{tr "Memory"}}</td>
          <td><input type="range" name="rangeInput" id="change_bar_mem_hosts" value="{{element.HOST_SHARE.MAX_MEM}}" max="{{maxReservedMEM}}">
          <label align="center">{{realMEM}}</label></td>
          <td><input type="text" id="textInput_reserved_mem_hosts" value="{{virtualMEMInput}}" min="0" size="1"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="row vcenter">
  <div class="large-9 columns">{{{templateTableVcenterHTML}}}</div>
</div>
<div class="row">
  <div class="large-9 columns">{{{templateTableHTML}}}</div>
</div>
<div class="row ec2">
  <div class="large-12 columns">
    <table class="datatable">
      <thead>
        <tr>
          <th colspan="3">{{tr "EC2"}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div id="host_ec2_div" class="row">
              <div class="row">
                <div class="large-12 columns">
                  <table class="datatable">
                    <thead>
                      <tr>
                        <th colspan="3">{{tr "Attributes"}}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {{{ec2_tr}}}
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="row">
                <div class="large-12 columns" id="capacity">
                  <fieldset class="ec2_capacity">
                    <legend>{{tr "Capacity"}}</legend>
                      {{{capacityTableHTML}}}
                  </fieldset>
                </div>
              </div> 
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div> 